import React, { PureComponent } from 'react'
import { Button, Form, Input, InputNumber, Select, Icon, Alert, notification, Radio } from 'antd'
import Modal from 'kenote-react-admin-modal'
import QueueAnim from 'rc-queue-anim'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { protoActions } from 'reduxs'
import _ from 'lodash'
import 'styles/modal.scss'

const FormItem = Form.Item
const RadioGroup = Radio.Group
const RadioButton = Radio.Button

@connect(
  state => ({
    postDataPending     : state.Proto.postDataPending,
    postDataError       : state.Proto.postDataError,
    postDataMessage     : state.Proto.postDataMessage,
    listData            : state.Proto.listData,
    postData            : state.Proto.postData,
    srv                 : state.Proto.srv,
    auth                : state.Passport.auth,
    rtsp_key            : state.Passport.rtsp_key,
    teams               : state.Passport.teams
  }),
  dispatch => ({
    actions: bindActionCreators({...protoActions}, dispatch)
  })
)
@Form.create()
export default class AddProtoNoticeModal extends PureComponent {

  state = {
    disabled: true,
    alert: null
  }

  constructor (props) {
    super(props)
    this._Modal = null
    this._Form = null
  }
  
  componentWillReceiveProps (nextProps) {
    const { postDataError, postDataMessage } = nextProps
    if (postDataError > 0 && postDataMessage !== this.props.postDataMessage) {
      this.setState({ alert: (
        <Alert
          style={{ margin: '0 40px 24px' }}
          message={postDataMessage}
          type="error"
          showIcon
          key="aaa"
        />
      )})
    }
    if (postDataError === 0 && postDataMessage !== this.props.postDataMessage) {
      this._Modal.handleOnCancel()
      this.props.actions.postData('notice-list', {}, this.props.rtsp_key)
      notification.info({
        message: `系统提示`,
        description: `系统公告已发送！`,
        duration: 8,
        placement: 'bottomRight'
      })
    }
  }
  
  render () {
    const { visible, onCancel, form, postDataPending, auth, listData, srv } = this.props
    const { getFieldDecorator } = form
    let serverOpts = null
    let protoSett = null
    if (listData) {
      protoSett = _.find(listData, o => o.name === 'send-notice')
      serverOpts = _.isString(protoSett.options.srv) ? srv : protoSett.options.srv
    }
    const options = {
      ref: view => this._Modal = view,
      visible: visible,
      onCancel: onCancel,
      title: '添加系统公告',
      footer: [
        <Button
          onClick={() => this._Modal.handleOnCancel()}
          >
          取消
        </Button>,
        <Button
          type="primary"
          loading={postDataPending}
          onClick={this.handleSubmit}
          >
          确定
        </Button>
      ],
      width: 700,
      maskClosable: false
    }
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 16 },
    }
    return (
      <Modal {...options}>
        <br />
        <Form 
          ref={ view => this._Form = view }
          layout="horizontal" 
          onSubmit={this.handleSubmit}
          >
          {postDataPending ? null : (
            <QueueAnim component="div" type={['bottom', 'top']} leaveReverse>
              {this.state.alert ? this.state.alert : null}
            </QueueAnim>
          )}
          <FormItem 
            {...formItemLayout} 
            label="公告正文" 
            >
            {getFieldDecorator('content', {
              rules: [{ required: true, message: '公告正文不能为空!' }],
            })(
              <Input />
            )}
          </FormItem>
          {serverOpts && (
            <FormItem 
              {...formItemLayout} 
              label="服务器" 
              >
              {getFieldDecorator('srv', {
                initialValue: _.keys(serverOpts)[0]
              })(
                <RadioGroup>
                  {_.keys(serverOpts).map((item, i) => {
                    return (
                      <RadioButton key={i} value={item}>{serverOpts[item]}</RadioButton>
                    )
                  })}
                </RadioGroup>
              )}
            </FormItem>
          )}
          <FormItem 
            {...formItemLayout} 
            label="循环间隔" 
            >
            {getFieldDecorator('dif', {
              initialValue: 5
            })(
              <InputNumber min="1" max="1000" />
            )}
            <span style={{ marginLeft: 10 }}>分钟</span>
          </FormItem>
          <FormItem 
            {...formItemLayout} 
            label="循环次数" 
            >
            {getFieldDecorator('times', {
              initialValue: -1
            })(
              <InputNumber min="-1" max="1000" />
            )}
          </FormItem>
        </Form>
      </Modal>
    )
  }
  
  handleSubmit = (e) => {
    e && e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        values['srv'] = parseInt(values['srv'])
        this.props.actions.postData('send-notice', values, this.props.rtsp_key)
      }
    })
  }
}